import CommonUtils from "../../common/utils/CommonUtils";
import product from "../../../../imgs/product-1.jpg";
import ImageWithError from "@page/common/comps/ImageWithError";
import ProtocolTag from "@page/common/comps/ProtocolTag";
import Popover from "@ui/RJMart/popover";
import icon_promise from "../../../../imgs/icon_promise.png";
import urlHook from "@page/common/utils/urlHook";
import dange from "@assets/dange.png";
import "../../cart/cart.css";
import DangeTag from "@page/common/comps/DangeTag";
import Uts from "@module/Uts";
import Filter from "@module/Filter";
import showLoginModal from "@root/P/pages/LoginModal/showLoginModal"

export default class GoodsLists extends React.Component {
    constructor() {
        super();
        this.state = {
            selected: false
        };
    }

    componentDidMount() {
        let imgLists = document.querySelectorAll(".search-page-lists-tab3-img");

        if (imgLists) {
            for (let i = 0; i < imgLists.length; i++) {
                let ele = imgLists[i];
                ele.onclick = function(e) {
                    e.stopPropagation();
                    window.open(urlHook.helpForTurePrice);
                };
            }
        }
    }

    getCutstringLen(brandName,agencyName,protocol){
        let cutLen=0;

        if(agencyName){
            cutLen=6;
            if(protocol==1){
                cutLen=4;
            }
            let letterLen=this.getEnglishLetterLen(brandName);
            let addLen=Math.floor(letterLen/2);
            cutLen+=addLen;
        }else{
            if(protocol==1){
                cutLen=8;
            }else{
                cutLen=12;
            }
            let letterLen=this.getEnglishLetterLen(brandName);
            let addLen=Math.floor(letterLen/2);
            cutLen+=addLen;
        }
        return cutLen;
    }

    getEnglishLetterLen(brandName){
        if(brandName){
            if(/[a-z\(\)]/.test(brandName)){
                return brandName.match(/[a-z\(\)]/g).length;
            }
        }
        return 0;
    }

    isSuppSelf(suppId){
        const isSuppSelf=Uts.getCookie('suppId')==suppId;
        return isSuppSelf;
    }

    render() {
        const { index, item } = this.props;
        const { selected } = this.state;
        const {
            photo,
            name,
            price,
            minPrice,
            saleAmount,
            productNum,
            casNo,
            suppname,
            brandName,
            specification,
            sn,
            suppId,
            agencyName,
            attrItems,
            suppflag,
            activityPrice,
            groupBuying,
            negotiatedPrice,
            hasActivity,
            dangerousTag,
            protocol
        } = item;
        let _attrItems = attrItems;
        let _brandName=brandName;
        if(brandName){
            _brandName=brandName.replace(Uts.allTagEXP, "");
        }
        let cutLen=this.getCutstringLen(_brandName,agencyName,protocol);
        // brandName=`阿基诺米(Rgenome)`
        return (
            <div className={"search-page-goods-lists-box"}>
                {index == 0 && <TabHeader />}
                <div
                    onClick={() => {
                        window.open(`#detail?productId=${sn}&suppId=${suppId}`);
                    }}
                    onMouseOver={() => {
                        this.setState({
                            selected: true
                        });
                    }}
                    onMouseOut={() => {
                        this.setState({
                            selected: false
                        });
                    }}
                    className={
                        selected
                            ? "search-page-lists-item-choosed"
                            : "search-page-lists-item"
                    }
                >
                    <div className={"search-page-lists-item-tab1 zen_w-p30"}>
                        <ImageWithError src={photo} />
                        <div className={"search-page-lists-item-pro zen_white"}>
                            <span
                                className="zen_3C3C3C zen_fs-16 zen_m-r-5 rj_el-2"
                                dangerouslySetInnerHTML={{
                                    __html: Filter.cutString(
                                        name.replace(Uts.allTagEXP, ""),
                                        27,
                                        1
                                    ).replace(
                                        new RegExp(
                                            "(" +
                                                Uts.transferReg(
                                                    $state.params.key
                                                ) +
                                                ")",
                                            "g"
                                        ),
                                        "<span style='color:red' >$1</span>"
                                    )
                                }}
                            />
                            {dangerousTag &&
                                dangerousTag != "其他" &&
                                dangerousTag != "常规化学品" && (
                                    <DangeTag dangerousTag={dangerousTag} />
                                )}
                            {global.hasLogin && (
                                <p className={"search-page-lists-item-pro-num"}>
                                    销量:{saleAmount}
                                </p>
                            )}
                        </div>
                    </div>
                    <div className={"search-page-lists-item-tab2 zen_w-p13"}>
                        <p
                            dangerouslySetInnerHTML={{
                                __html: productNum || "无"
                            }}
                            className={"search-page-lists-text-no zen_w-p90"}
                        />

                        <p
                            dangerouslySetInnerHTML={{
                                __html: casNo
                            }}
                            className={"search-page-lists-text-no1 zen_w-p90"}
                        />
                    </div>
                    <div className={"search-page-lists-item-tab3 zen_w-p20"}>
                        <div className="zen_l-h-20 zen_clf">
                            <p
                                dangerouslySetInnerHTML={{
                                    __html: `${brandName?Filter.cutString(brandName.replace(Uts.allTagEXP, ""),cutLen,1).replace(
                                        new RegExp(
                                            "(" +
                                            Uts.transferReg(
                                                $state.params.key
                                            ) +
                                            ")",
                                            "g"
                                        ),
                                        "<span style='color:red' >$1</span>"
                                        ) : 
                                        "无"}<span style="margin-left:5px;color:#0093EB"> ${agencyName ||
                                        ""}</span>`
                                }}
                                className={
                                    "search-page-lists-text-no zen_f-left zen_m-w-p80"
                                }
                            />
                            {protocol == "1" && (
                                <ProtocolTag className="zen_fs-12 zen_bg-58d1bd zen_FFFFFF zen_p-v-2 zen_p-h-5 zen_bdr-3 zen_m-l-3"/>
                            )}
                        </div>
                        <p
                            onClick={e => {
                                e.stopPropagation();
                                window.open(`#supplierShop?suppId=${suppId}`);
                            }}
                            dangerouslySetInnerHTML={{
                                __html:
                                    suppflag == 1
                                        ? `<div style="display: flex;"><span>${suppname ||
                                              "/"}</span><span style="height:30px"><img src="${icon_promise}" class="search-page-lists-tab3-img" style="width:30px;height:30px;margin-top:-5px" /></span></div>`
                                        : `${suppname || "/"}`
                            }}
                            className={"search-page-lists-text-tab3 zen_w-p85"}
                        />
                    </div>
                    {this.renderAttr(_attrItems)}

                    <div className={"search-page-lists-item-tab4 zen_w-p12"}>
                        <p className={"search-page-lists-text-guige"}>
                            {Filter.cutString(specification, 12, 1)}
                        </p>
                    </div>
                    <div className={"search-page-lists-item-tab5 zen_w-p12"}>
                        {(!global.hasLogin&&!this.isSuppSelf(suppId)) ?  (
                            <p
                                onClick={(e)=>{
                                    e.stopPropagation()
                                    showLoginModal(false,true)
                                }}
                                className={"search-page-lists-text-price1"}>
                                {global.isSupp? "单位登录可见":"登录可见"}
                            </p>
                        )
                            :
                        (
                            <div
                                className="zen_clf"
                                style={{ display: "flex" }}
                            >

                                <div>
                                    <p className="zen_F5222D zen_bold zen_fs-18">
                                        {
                                            minPrice==undefined?
                                                '价格异常':
                                            `¥${minPrice&&minPrice.toFixed(2)}`
                                        }
                                    </p>
                                    <br />
                                    {price - 0 > minPrice - 0 && (
                                        <p
                                            className={
                                                "search-lists-item-tab5-price"
                                            }
                                        >
                                            ¥{price&&price.toFixed(2)}
                                        </p>
                                    )}
                                </div>

                                {this.renderPriceTag(
                                    negotiatedPrice,
                                    activityPrice,
                                    groupBuying
                                )}
                            </div>
                        )
                        }
                    </div>
                </div>
            </div>
        );
    }

    renderPriceTag(negotiatedPrice, activityPrice, groupBuying) {
        if (negotiatedPrice) {
            return (
                <div
                    className="zen_f-right zen_fs-12 zen_p-h-4 zen_p-v-2 zen_m-l-5 zen_bg-FF6D0B zen_FFFFFF zen_bdr-4"
                    style={{
                        width: 60,
                        height: 18,
                        minWidth: 60,
                        lineHeight: "20px",
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center"
                    }}
                >
                    <p>协议价</p>
                </div>
            );
        } else if (activityPrice) {
            return (
                <p
                    className="zen_f-right zen_fs-12 zen_p-h-4 zen_p-v-2 zen_m-l-5 zen_bg-FF6D0B zen_FFFFFF zen_bdr-4"
                    style={{
                        width: 60,
                        height: 18,
                        minWidth: 60,
                        lineHeight: "20px",
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center"
                    }}
                >
                    限时折扣
                </p>
            );
        } else if (groupBuying) {
            return (
                <p
                    className="zen_f-right zen_fs-12 zen_p-h-4 zen_p-v-2 zen_m-l-5 zen_bg-FF6D0B zen_FFFFFF zen_bdr-4"
                    style={{
                        width: 40,
                        height: 18,
                        minWidth: 40,
                        lineHeight: "20px",
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center"
                    }}
                >
                    团购
                </p>
            );
        }
        return null;
    }

    renderAttr(_attrItems) {
        if (_attrItems && _attrItems.length == 0) {
            return <div className={"search-page-lists-item-tab6 zen_w-p17"} />;
        }
        return (
            <Popover
                style={{
                    textAlign: "left",
                    backgroundColor: "transparent",
                    width: "17%"
                }}
                content={<AttrComp attrItems={_attrItems} />}
                trigger="hover"
                position="top"
            >
                <div className={"search-page-lists-item-tab6 zen_w-p85"}>
                    {_attrItems &&
                        _attrItems.map((item, index) => {
                            if (index <= 1) {
                                return (
                                    <p
                                        key={index}
                                        dangerouslySetInnerHTML={{
                                            __html: item
                                        }}
                                        className={Uts.sc([
                                            index == 1
                                                ? "search-page-lists-text-tab6-1"
                                                : "search-page-lists-text-tab6",
                                            _attrItems.length > 2 && index == 1
                                                ? "rj_l-list-more"
                                                : ""
                                        ])}
                                    />
                                );
                            }
                        })}
                </div>
            </Popover>
        );
    }
}

class AttrComp extends React.Component {
    render() {
        const { attrItems } = this.props;

        return (
            <div className={"search-page-lists-item-tab6"}>
                {attrItems &&
                    attrItems.map((item, index) => {
                        return (
                            <p
                                key={index}
                                dangerouslySetInnerHTML={{
                                    __html: item
                                }}
                                className={"search-page-lists-text-tab6-2"}
                            />
                        );
                    })}
            </div>
        );
    }
}

class TabHeader extends React.Component {
    render() {
        return (
            <div className={"search-page-lists-tab-header"}>
                <div className={"search-page-lists-tab1 zen_w-p30"}>
                    <p>商品信息</p>
                </div>
                <div className={"search-page-lists-tab2 zen_w-p13"}>
                    <p>货号/CAS号</p>
                </div>
                <div className={"search-page-lists-tab3 zen_w-p20"}>
                    <p>品牌/供应商</p>
                </div>
                <div className={"search-page-lists-tab6 zen_w-p17"}>
                    <p>附加属性</p>
                </div>
                <div className={"search-page-lists-tab4 zen_w-p12"}>
                    <p>规格</p>
                </div>
                <div className={"search-page-lists-tab5 zen_w-p12"}>
                    <p>价格</p>
                </div>
            </div>
        );
    }
}
